<template>

<!-- 新建虚拟排程 页面
此页面应用于读取并上传排产数据供后端解析并返回解析后的虚拟排程模型，
-->
  <iframe id="work-process" src="../../../../static/plugins/qunee/work-process-import.html" :style="siteContentViewHeight" width="100%" ></iframe>


</template>

<script>
import {isURL} from '@/utils/validate'

export default {
  data () {
    return {
    }
  },
  // 计算属性用于动态调整iframe的高度
  computed: {
    // 动态设置画布高度
    documentClientHeight: {
      get () { return this.$store.state.common.documentClientHeight }
    },
    siteContentViewHeight () {
      var height = this.documentClientHeight - 50 - 30 - 10
      if (this.$route.meta.isTab) {
        height -= 40
        return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
      }
      return { minHeight: height + 'px' }
    }
  },

  mounted () {
    window['vueDefinedMyProp1'] = (receiveParam1, receiveParam2) => {
      this.updateInfo(receiveParam1, receiveParam2)
    }

    window['getInitData'] = () => {
      // 获取排产模型列表
      // this.getModuleBy_id();

      this.getInitData()
    }
  },

  methods: {

    // 取地址后拼接的参数
    setCapsjson () {
      let url = this.decodeUrl(window.location.href)
      let fileUrl = url.substring(url.indexOf('key=') + 4, url.length)

      // 调对应id的html
      document.getElementById('work-process').contentWindow.getTaskName(fileUrl)
    },

    getJson (receiveParams) {
      this.$http({
        url: this.$http.adornUrl(receiveParams),
        method: 'get'
      }).then((response) => {
        // alert('请求成功')

        // this.$refs.iframe.contentWindow.onDataCollected(response.data);//这样识别不到contentWindow不知道为啥
        document.getElementById('work-process').contentWindow.onDataCollected(JSON.stringify(response.data))
      })
    },

    updateInfo (json, updatedNodeId) {
      console.log(json)
      console.log(updatedNodeId)
      this.$http({
        url: this.$http.adornUrl('/generator/model/updateInfo'),
        method: 'post',
        data: this.$http.adornData({json, updatedNodeId}, false)
      }).then(() => {
        document.getElementById('work-process').contentWindow.callBack('/generator/model/qunee')
      })
    },

    addModel (item) {
      // console.log(item.label)
      this.$http({
        url: this.$http.adornUrl('/generator/model/addModel'),
        method: 'post',
        data: this.$http.adornData(item.label, false)
      }).then((res) => {
        console.log(res.data)
        document.getElementById('work-process').contentWindow.addModel(JSON.stringify(res.data))
      })
    },

    createEdge () {
      this.$http({
        url: this.$http.adornUrl('/generator/model/createEdge'),
        method: 'post'
        // data: this.$http.adornData(item.label,false)
      }).then((res) => {
        console.log(res.data)
        document.getElementById('work-process').contentWindow.createEdge(JSON.stringify(res.data))
      })
    },

    // 获取排产模型列表
    getInitData () {
      this.$http({
        url: this.$http.adornUrl('/business/Project3/datamodel/allDataInfo'),
        method: 'get'
      }).then(({data}) => {
        if (data && data.code === 0) {
          document.getElementById('work-process').contentWindow.initToolbox(data.list)
        }
      })
    },

    getModuleBy_id () {
      // console.log("读取排程数据方法")
      let url = this.decodeUrl(window.location.href)
      let _id = url.substring(url.indexOf('key=') + 4, url.length)

      this.$http({
        async: false,
        url: this.$http.adornUrl('/business/model/dataapstask/getModule/' + _id),
        method: 'get'

      }).then(res => {
        // console.log("读取排程数据2")
        var aps = res.data
        var Tem = {}
        Tem.version = aps.version
        Tem.datas = aps.datas
        Tem.scale = aps.scale
        Tem.tx = aps.tx
        Tem.ty = aps.ty
        // console.log(Tem)

        var Aps = this.decodeUrl(JSON.stringify(aps))
        // console.log( Aps)

        document.getElementById('work-process').contentWindow.getQunee(Aps)
      })
    },

    // 给地址转义符转回来
    decodeUrl (url) {
      const codes = [
        {
          key: '%20',
          value: ' '
        },
        {
          key: '%22',
          value: '\'\''
        },
        {
          key: '%23',
          value: '#'
        },
        {
          key: '%25',
          value: '%'
        },
        {
          key: '%26',
          value: '&'
        },
        {
          key: '%28',
          value: '('
        },
        {
          key: '%29',
          value: ')'
        },
        {
          key: '%2B',
          value: '+'
        },
        {
          key: '%2C',
          value: ','
        },
        {
          key: '%2F',
          value: '/'
        },
        {
          key: '%3A',
          value: '_' // 为了正确转换，改成了由':'改成了'_'
        },
        {
          key: '%3B',
          value: ';'
        },
        {
          key: '%3C',
          value: '<'
        },
        {
          key: '%3D',
          value: '='
        },
        {
          key: '%3E',
          value: '>'
        },
        {
          key: '%3F',
          value: '?'
        },
        {
          key: '%40',
          value: '@'
        },
        {
          key: '%5C',
          value: '\\'
        },
        {
          key: '%7C',
          value: '|'
        }
      ]
      for (let item of codes) {
        if (url.includes(item.key)) {
          const targetValue = url.replace(item.key, item.value)
          return this.decodeUrl(targetValue)
        }
      }
      return url
    }

  }
}
</script>

<style scoped>

</style>
